<template>
	<el-cascader ref="cascaderRef" class="el_cascader_bm" popper-class="cascader_tree_ my_popper" v-model="deviceTypeId" :props="defaultProps"
		:options="treeList.tree" :placeholder="placeholder_text" @change="handleChange" collapse-tags clearable filterable />
</template>

<script setup lang="ts">
import { getDeptTreeData } from "@/http/userManage"
const props = defineProps({
	edit: {
		type: String,
		default: ""
	},
	id: {
		type: String,
		default: ""
	},
	selectData: {
		type: Array,
		default: [] as any
	},
	location: { // 设备位置
		type: Boolean,
		default: false
	},
	placeholder_text: {
		type: String,
		default: " "
	}
})


let deviceTypeId: any = ref(['0']);

watch(() => props.selectData, (newValue, oldValue) => {
	console.log(newValue);
	deviceTypeId.value = newValue
});



//指定组件value,label,children对应的属性值 checkStrictly:true父子节点不互相关联,选择任意一级
const defaultProps = {
	// checkStrictly: true,
	multiple: true,
	value: 'id',
	label: 'name',
	children: 'children',
	disabled: 'disabled', // 禁用字段
	expandTrigger: 'hover' as const
}


interface Tree {
	area: number;
	code: string;
	codePath: string;
	id: string;
	level: number;
	name: string;
	number: string;
	parentId: string;
	childList?: Tree[]
}

const treeList = reactive({
	tree: [] as Array<Tree>,//系统/类别/类型/设备树形结构
})

const emit = defineEmits(['getDeviceTypeId', 'getTreeList']);

const cascaderRef = ref<any>("");

//所属系统/类别/类型/设备改变时
const handleChange = (val: any) => {
	// console.log('48', 48);

	// deviceTypeId.value = val[val.length - 1];
	let nodeChildren = cascaderRef.value.getCheckedNodes();
	let data = [] as any
	console.log('80',nodeChildren);

	if (nodeChildren.length) {
		nodeChildren.map((item: any) => {
			if (item.data.type==2) {
				let i = {
					"userId": item.data.id,
					"userName": item.data.name
				}
				data.push(i)
			}
		})
	}
	emit('getDeviceTypeId', data);
	//如果选择到最后一级时,关闭面板
	// console.log('nodeChildren', nodeChildren[0].children);
	if (nodeChildren[0] && nodeChildren[0].children && nodeChildren[0].children.length == 0) {
		// cascaderRef.value.togglePopperVisible();
	}
}

const getTreeList = () => {
		getDeptTreeData().then((res: any) => {
			console.log(res);

			if (res && res.result && res.result) {
				treeList.tree = res.result;
			}
		})
}

//清空
const empty = () => {
	cascaderRef.value.cascaderPanelRef.clearCheckedNodes();
	nextTick(() => {
		deviceTypeId.value = ['0'];
	})

}

//暴露方法,父组件才能调用
defineExpose({ empty, getTreeList });
</script>

<style lang="scss">
.el-cascader {
	display: flex;
	align-items: center;
	height: auto !important;
	min-height: 32px;

	.el-input {
		height: auto !important;
		min-height: 32px;

		.el-input__wrapper {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

.cascader_tree {

	// :deep(.el-radio__inner) {
	.el-radio__inner {
		top: -18px;
		left: -19px;
		border-radius: 0;
		border: 0;
		width: 350px;
		height: 34px;
		background-color: transparent !important;
		cursor: pointer;
		box-sizing: border-box;
		position: absolute;
	}

	.el-radio__input {
		&.is-checked {
			.el-radio__inner {
				background: transparent;
			}
		}
	}

}

.el_cascader_bm {
	&:hover {
        .el-input__wrapper {
            box-shadow: none !important;
        }
    }

    .el-cascader__tags {
        flex-wrap: nowrap;
        overflow: hidden;
    }
}
</style>
